import React, { Component } from 'react';
import MySwiper from '../../components/MySwiper';
import {index_banner} from '../../api/index'
import MyHeader from '../../components/MyHeader';
import MyEntry from '../../components/MyEntry';
import MySecKill from '../../components/MySecKill';
import MyProList from '../../components/MyProList';
import HomeNews from '../../components/HomeNews';
import Guanggao from '../../components/Guanggao';
import Banner from '../../components/Banner';

class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
           bannerlist:[] 
        }
    }

    toSearch() {
        //以下这些跳路由方式都可以称为"编程式导航"
        // this.props.history.push('/search');//跳路由
        // this.props.history.go(-1);//返回上一个路由
        // this.props.history.goBack();//返回上一个路由
        // this.props.history.gpForward();//前进一个路由
        // this.props.history.replace('/search');//替换当前路由

        // this.props.history.push('/search/'+888);//跳动态路由
        this.props.history.push({ pathname:'/search',query:{id:'666'} });//跳路由传参
    }

    async componentDidMount(){
        var res = await index_banner();
        if( res.data.code == 200 ){
            this.setState({bannerlist: res.data.list })
        }
    }
    render() {
        //当一个组件是通过匹配路由规则 渲染出来的,这样的组件props中默认会自动添加三个路由相关的对象
        // history,location,match
        //当一个组件不是通过匹配路由规则 渲染出来的,这样的组件props中默认是空的{}

        //history<主要负责跳路由
        //location:主要负责获取路由相关参数
        //match:主要负责获取路由相关参数
        // console.log(this.props);
        
        return (
            <div className='home'>
                {/* 搜索栏 */}
                <MyHeader />
                {/* 轮播图 */}
                <MySwiper swiperlist={this.state.bannerlist} />
                {/* 首页轮播图消息 */}
                <HomeNews/>
                {/* 导航栏 */}
                <MyEntry />
                {/* 广告 */}
                <Banner/>
                {/* 值得买 */}
                <MySecKill />
                {/* 商品列表 */}
                <MyProList/>
            </div>
        );
    }
}

export default Home;